//修改明细页面
import React,{Component} from 'react'
import './ModifyDetailed.css'
import {Modal,Divider } from 'antd'

class ModifyInformation extends Component{
    constructor(props){
        super(props)
        this.state={
            content:[  //测试数据
                {
                    id:1,
                    name:'名称',
                    prev:'成都莱想科技有限公司',
                    next:'啦啦啦啦'
                },
                {
                    id:2,
                    name:'手机号',
                    prev:'18387869898',
                    next:'18365485621'
                },
                {
                    id:3,
                    name:'代理区域',
                    prev:'四川成都市',
                    next:'四川绵阳市'
                }
            ]
        }
    }

    getchild=(data)=>{            //传回来的数据map出来，类似class出来组件
        let children = data.map((item,index)=>{
            return(
                <div>
                    <div>{item.name}</div>
                    <div>{item.prev}</div>
                    <div>{item.next}</div>
                </div>
            )
        })
        return children
    }

    Modifycancel=()=>{
        this.props.onCancel();
        this.props.form.resetFields();
    }

    render(){
        let child = this.getchild(this.state.content)
        return(
            <Modal title="修改明细" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                onCancel={this.Modifycancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
                <div className="detail_box">
                    <div className="detail_nametime">
                        <div className="detail_person">
                            <div>操作人</div>
                            <div>wangyanzu</div>
                        </div>
                        <div className="detail_person">
                            <div>操作时间</div>
                            <div>2018-1-2 11:46:35</div>
                        </div>
                    </div>
                    <Divider  />
                    <div className="detail_revise" style={{padding:'0 40px'}}>
                        <div style={{fontWeight:'bold'}}>修改内容</div>
                        <Divider   />
                        <div className="detail_content">
                            <div>
                                <div>修改项</div>
                                <div>修改前内容</div>
                                <div>修改后内容</div>
                            </div>
                            {child}
                        
                        </div>
                    </div>
                    <div style={{padding:"0 40px",marginTop:"30px"}}>
                        <div style={{fontWeight:'bold'}}>备注</div>
                        <Divider  />
                        <p>城市服务商要求改动</p>
                    </div>
                </div>
            </Modal>
        )
    }
}
export default ModifyInformation